<template>
    <div>
    <div class="table-box">
        <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
        >
            <template slot="status" slot-scope="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{
                    statusFilter(scope.row.status)
                }}</el-tag>
            </template>
        </Table>
    </div>
        <pagination
            v-if="total > 0"
            :total="total"
            :pageSizes="[10, 20, 30, 40, 50]"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="getDataList"
        />
    </div>
</template>
<script>
import Table from "@/components/Table";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { equipment } from "@/api/factuer";

import { mapGetters } from "vuex";
export default {
    components: { Table, Pagination },
    props: {
        currentRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            listLoading: false,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 10,
            },
            tableData: [],
            tableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "60",
                    fixed: true,
                },
                {
                    label: "状态",
                    prop: "id",
                    slot: "status",
                    formatter: (item) => {
                        let classify = this.enums.EQUIP_CONNECT_LOG_STATUS.find(
                            (p) => {
                                return p.code == item.status;
                            }
                        );
                        return classify ? classify.label : "";
                    },
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                },
            ],
        };
    },
    watch: {
        currentRow: {
            handler(val) {
                this.getDataList();
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {
        ...mapGetters(["enums"]),
    },

    methods: {
        getDataList() {
            this.listLoading = true;
            equipment(
                `/connect/list/${this.currentRow.id}`,
                "post",
                this.searchForm,
                2
            )
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },
        statusFilter(val) {
            let classify = this.enums.EQUIP_CONNECT_LOG_STATUS.find((p) => {
                return p.code == val;
            });
            return classify ? classify.label : "";
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table__empty-block {
    min-height: 240px !important;
}
</style>
